import OceanComponent from './OceanComponent';
import { ButtonGroupProps, ButtonProps, NButton } from 'naive-ui';
import OButtons from '../../components/Button.vue';
import { Ref, ref } from 'vue';

type TButtonProps = ButtonProps & { key?: string };
class Button extends OceanComponent<TButtonProps> {
  isOceanComponent: boolean = false;
  name: string;
  onClick: Function;
  show: Ref<boolean> = ref(true);
  constructor(name, attrs?) {
    super(NButton, attrs);
    this.name = name;
  }
  click(fn) {
    this.onClick = fn || new Function();
  }
}

interface Buttons {
  button(name: string, props: ButtonProps): Button;
}

type TButtons = ButtonGroupProps & {
  type?: 'group' | 'default';
  auth?: any[];
};

class Buttons extends OceanComponent<TButtons> implements Buttons {
  buttons: Button[] = [];
  // authKeys: Ref<string[]> = ref([]);
  constructor(attrs?: TButtons) {
    super(OButtons, attrs);
  }
  button(name: string, props?: ButtonProps & { key?: string }) {
    let btn = new Button(name, props);
    this.buttons.push(btn);
    return btn;
  }
  auth(keys: string[] | false = false) {
    // keys 为false 则不认证
    if (keys === false) {
      this.buttons.forEach(btn => (btn.show.value = true));
    } else {
      this.buttons.forEach(btn => {
        let authKey = btn.attrs.key;
        // 如果没有key ，则跳过认证
        if (!authKey) {
          btn.show.value = true;
        } else {
          btn.show.value = keys.indexOf(authKey) > -1;
        }
      });
    }
  }

  get length() {
    return this.buttons.length;
  }
}
export default Buttons;
export type { TButtons, TButtonProps };
